FlutterでWebページを動かしてみた

FlutterでWebページを動かしてみた

Clock Icon2022.09.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

以前からFlutterが気になっており、Hello World的に簡単に触ってみました。 やってみたことは、プロジェクトを作成 → 開発用に動くことを確認 → Webページとしてビルドして動くことを確認、という最初の一歩と言った内容です。

簡単な内容だったのですが少し迷った部分もあったので、その点も含めて記事として書きたいと思います。

Flutter等の用意~プロジェクトの作成

Webページとして動かすためにはFlutterのバージョンを新しくしておく必要があります。私の場合は古いFlutterがインストール済だったため、以下のコマンドでアップグレードを行いました。

$ flutter channel stable
$ flutter upgrade

アップグレードしたら以下のコマンドでWebに対応しているかを確認します。

$ flutter devices
(中略)
Chrome (web)      • chrome  • web-javascript • Google Chrome 105.0.5195.127
(中略)

またビルドしたページをWebサーバ内で起動するのにPythonを使うため、作業環境にPythonがインストールされていない場合は入れておきます。(他に使用できるWebサーバがあればPythonは必要ありません)

Flutterを用意したら、flutterコマンドを使用してプロジェクトを作成します。

$ flutter create hello_web_app

開発用に動くことを確認

プロジェクトを作成すると、デフォルトのページが用意されます。今回は特にデザインなどは変更せず、このデフォルトのページが開発用に動くかを確認してみました。

以下のコマンドを実行します。

$ cd hello_web_app
$ flutter run -d chrome
(中略)
An Observatory debugger and profiler on Chrome is available (中略)
Flutter Web Bootstrap: Programmatic
The Flutter DevTools debugger and profiler on Chrome is available (中略)

上記のコマンドを実行すると、既にChromeブラウザを開いている場合は新しいChromeが開いてページが表示されるようです。 最初は新しいChromeが開いていることに気づかず、何が起きているのか暫く分かりませんでした。

起動したChromeを確認すると以下のようなデフォルトページが表示されるかと思います。

Webページとしてビルドして動くことを確認

次にWebページとしてビルドします。

$ flutter build web

ビルドすると「build/web」配下にHTMLやCSSなどWebページの一式が作成されるようです。このフォルダに移動してWebサーバ内で動かして確認してみます。以下のコマンドを実行します。

$ cd build/web/
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

「http://localhost:8000/」をブラウザで開くと、先のキャプチャと同じデザインのページが表示されるかと思います。ただし環境によるとは思うのですが、Pythonを使ったWebサーバの起動に時間が掛かる場合があるようです。 私の場合はブラウザで初めてページを表示するのに暫く時間が掛かりました。

最後に

FlutterでWebページを動かしてみる一歩目としてデフォルトページを表示してみました。何かの役に立てば幸いです。

参考サイト

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.